<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>广告维护——查看详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="content_diy">
        <ul>
          <li>
            <h2>广告信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>广告名称：</label>
                <p>{{list.advert_name}}</p>
              </dd>
              <dd>
                <label>广告封面图：</label>
                <p>
                  <img :src="list.advert_cover" preview="0" preview-text="广告封面图">
                </p>
              </dd>
              <dd>
                <label>广告介绍：</label>
                <div class="js">{{list.advert_introduce}}</div>
              </dd>
              <dd>
                <label>广告内容：</label>
                <div class="js" v-html="list.advert_content"></div>
              </dd>
              <dd v-if="showIF">
                <label>驳回原因：</label>
                <div class="js" v-html="list.turn_down"></div>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "../../../http/api.js";
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: {}, //数据
      rules: {
        //验证规则
        desc: [{ required: true, message: "请填写驳回原因", trigger: "blur" }]
      },
      Token: sessionStorage.getItem("Token"),
      showIF: false //驳回内容是否显示！
    };
  },
  methods: {
    getData() {
      this.$post(api.advert_info, {
        token: this.Token,
        advert_id: this.id
      })
        .then(res => {
          if (res.status == "0") {
             this.list = res.data;
             //如果有驳回的 显示原因
             if(res.data.status=="2"){
               this.showIF=true
             }
          } else {
            this.$message.error(res.msg);
          }
          // 如果登录过期
          if (res.status == "relogin") {
            this.$message.error(res.msg);
            this.$router.push("/login");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.container .title {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li h2 {
  color: #f00;
  font-size: 18px;
}
.dl_diy {
  width: 60%;
  margin: 0 auto;
}
.dl_diy dd {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #d2cccc;
  border-radius: 3px;
  margin-top: -1px;
}
.dl_diy dd label {
  font-size: 16px;
  font-weight: bold;
  flex: 2;
  padding: 10px 0;
  text-align: center;
  border-right: 1px solid #d2cccc;
}
.dl_diy dd p {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd p img{
 max-width: 100%;
}
.dl_diy dd .js {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd .js img{
 max-width: 100%!important;
}
</style>


